<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">用户名:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-user_id" data-rule="required" data-source="user/user/index" data-field="nickname" class="form-control selectpage" name="row[user_id]" type="text" value="">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">申请类型:</label>
        <div class="col-xs-12 col-sm-8">
            <select id="c-goods_type" class="form-control" data-rule="required" name="row[goods_type]">
                <!-- 下拉选项示例，你需要根据实际情况添加选项 -->
                <option value="">请选择申请类型</option>
                <option value="categories">栏目</option>
                <option value="articles">文章</option>
                <option value="user_group">会员分组</option>
                <option value="album">专辑</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">申请内容</label>
        <div class="col-xs-12 col-sm-8">
            <select id="c-table_name" class="form-control" data-rule="required" name="row[table_name]">
                <!-- 此处将通过 AJAX 请求动态添加选项 -->
                <option value="">请选择申请内容</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">商品名称:</label>
        <div class="col-xs-12 col-sm-8">
            <select id="c-goods_id" class="form-control" data-rule="required" name="row[goods_id]">
                <!-- 此处将通过 AJAX 请求动态添加选项 -->
                <option value="">请选择申请类型</option>
            </select>
        </div>
    </div>











    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>

<script>
    // 监听申请类型下拉菜单变化事件渲染合适的goods_type下拉菜单
    document.getElementById('c-goods_type').addEventListener('change', function() {
        var goodsType = this.value; // 获取选择的申请类型值
        var table_name_option = [];
        switch (goodsType) {
            case 'categories'://栏目
                //plate=论坛分类,plate_post=论坛-帖子表,plaza_category=广场-分类表,plaza_post=广场-帖子表,live_category=直播-分类表,live=直播表,video_category=音视频-分类,video=音视频,user_group=用户(会员)分组,album=专辑
                table_name_option = [
                    {
                        'key': '请先选择申请类型',
                        'val': ''
                    },
                    {
                        'key': '成长计划(视频)',
                        'val': 'video_category'
                    },
                    {
                        'key': '债市论坛(论坛)',
                        'val': 'plate'
                    },
                    {
                        'key': '直播',
                        'val': 'live_category'
                    },
                ];
                break;
            case 'articles'://文章
                table_name_option = [
                    {
                        'key': '请先选择申请类型',
                        'val': ''
                    },
                    {
                        'key': '债市论坛(内容)',
                        'val': 'plate_post'
                    },
                    {
                        'key': '直播(内容)',
                        'val': 'live'
                    },
                    {
                        'key': '成长计划内容',
                        'val': 'video'
                    },
                ];
                break;
            case 'user_group'://会员分组
                table_name_option = [
                    {
                        'key': '请先选择申请类型',
                        'val': ''
                    },
                    {
                        'key': '用户会员组',
                        'val': 'user_group'
                    },
                ];
                break;
            case 'album'://专辑
                table_name_option = [
                    {
                        'key': '请先选择申请类型',
                        'val': ''
                    },
                    {
                        'key': '专辑',
                        'val': 'album'
                    },
                ];
                break;
            default:
                return false
        }

        // 清空申请内容下拉菜单
        var tableNameSelect = document.getElementById('c-table_name');
        tableNameSelect.innerHTML = '';

        // 将获取到的商品名称选项添加到下拉菜单中
        table_name_option.forEach(function(item) {
            var option = document.createElement('option');
            option.value = item.val; // 设置选项值
            option.textContent = item.key; // 设置选项显示文本
            tableNameSelect.appendChild(option);
        });


        // 清空商品名称下拉菜单
        var goodsIdSelect = document.getElementById('c-goods_id');
        goodsIdSelect.innerHTML = '';
        var option = document.createElement('option');
        option.value = ''; // 设置选项值
        option.textContent = '请先选择申请内容'; // 设置选项显示文本
        goodsIdSelect.appendChild(option);
    });



    // 监听申请类型下拉菜单变化事件渲染合适的table_name下拉菜单
    document.getElementById('c-table_name').addEventListener('change', function() {
        var goods_type = $('#c-goods_type').val()
        var table_name = this.value; // 获取选择内容表
        console.log(111,goods_type,table_name);
        // 发送 AJAX 请求
        // 替换以下代码为实际的 AJAX 请求，获取相关商品名称选项
        // 这里是示例代码
        $.ajax({
            'type':'get',
            'url':'user/membership_application/getGoodsList',
            'dateType':'json',
            'data':{
                'goods_type':goods_type,
                'table_name':table_name
            },
            'success':function(res){
                // 清空商品名称下拉菜单
                var goodsIdSelect = document.getElementById('c-goods_id');
                goodsIdSelect.innerHTML = '';
                var option = document.createElement('option');
                option.value = ''; // 设置选项值
                option.textContent = '请先选择申请内容'; // 设置选项显示文本
                goodsIdSelect.appendChild(option);
                if (res.code == 1){
                    res.data.forEach(function(item) {
                        var option = document.createElement('option');
                        option.value = item.id; // 设置选项值
                        option.textContent = item.name; // 设置选项显示文本
                        goodsIdSelect.appendChild(option);
                    });
                }else{
                    layer.msg(res.msg, {icon: 5});
                }


                return false;
            }
        });
        return false;
        fetch('your_api_endpoint?goodsType=' + goodsType)
            .then(response => response.json())
            .then(data => {
                // 清空商品名称下拉菜单
                var goodsIdSelect = document.getElementById('c-goods_id');
                goodsIdSelect.innerHTML = '';

                // 将获取到的商品名称选项添加到下拉菜单中
                data.forEach(function(item) {
                    var option = document.createElement('option');
                    option.value = item.value; // 设置选项值
                    option.textContent = item.label; // 设置选项显示文本
                    goodsIdSelect.appendChild(option);
                });
            })
            .catch(error => {
                console.error('Error:', error);
            });
    });
</script>